<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>表单</title>
	</head>
	<body>
		<div id="root"></div>

		<script
			type="text/javascript"
			src="./components/react.development.js"
		></script>
		<script
			type="text/javascript"
			src="./components/react-dom.development.js"
		></script>
		<script type="text/javascript" src="./components/babel.min.js"></script>

    <script type="text/babel">
			// class NameForm extends React.Component {
			// 	constructor (props) {
			// 		super(props);
			// 		this.state = { value: '' };

			// 		this.handleChange = this.handleChange.bind(this);
			// 		this.handleSubmit = this.handleSubmit.bind(this);
			// 	}

			// 	handleChange (event) {
			// 		this.setState({ value: event.target.value });
			// 	}

			// 	handleSubmit (event) {
			// 		alert('提交的名字：' + this.state.value);
			// 		event.preventDefault();
			// 	}

			// 	render () {
			// 		return (
			// 			<form onSubmit={this.handleSubmit}>
			// 				<label>
			// 					名字：
			// 						<input type="text" value={this.state.value} onChange={this.handleChange} />
			// 				</label>
			// 				<input type="submit" value="提交" />
			// 			</form>
			// 		)
			// 	}
			// }

			// ReactDOM.render(
			// 	<NameForm />,
			// 	document.getElementById('root')
			// )


			// textarea标签
			class EssayForm extends React.Component {
				constructor (props) {
					super(props);
					this.state = {
						value: '请撰写一篇关于你喜欢的 DOM 元素的文章.',
						select: 'lime'
					};

					this.handleChange = this.handleChange.bind(this);
					this.handleSubmit = this.handleSubmit.bind(this);
				}

				handleChange (event) {
					this.setState({value: event.target.value})
				};

				handleSubmit (event) {
					alert('提交的文章：' + this.state.value);
					event.preventDefault();
				}

				render () {
					return (
						<form onSubmit={this.handleSubmit}>
							<label>

								<select multiple={true} value={['B', 'C']}>
									<option value="A">葡萄柚A</option>
									<option value="B">葡萄柚B</option>
									<option value="C">葡萄柚C</option>
								</select>

								<select value={this.state.select} onChange={this.handleChange}>
									<option value="grapefruit">葡萄柚</option>
									<option value="lime">酸橙</option>
									<option value="coconut">椰子</option>
									<option value="mango">芒果</option>
								</select>

								文章：
								<textarea value={this.state.value} onChange={this.handleChange}></textarea>
							</label>
							<input type="submit" value="提交"/>
						</form>
					)
				}
			}

			ReactDOM.render(
				<EssayForm />,
				document.getElementById('root')
			)
			
		</script>
	</body>
</html>
